<template>
  <div>
    <a v-if="nodeList.length == 0" @click="plusAdd()" href="javascript:void(0);">添加</a>

    <a-row
      v-for="(item, index) in nodeList"
      :key="index"
      :gutter="16"
      :class="index == nodeList.length - 1 ? '' : 'row_margin'"
    >
      <a-col :span="1">
        <a href="javascript:void(0);">{{ index + 1 }}</a>
      </a-col>
      <a-col :span="6">
        <a-select v-model="item.node" style="width: 100%">
          <a-select-option v-for="s_item in selectList" :key="s_item.sign" :value="s_item.sign">
            {{ s_item.title }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="6">
        <a-select v-model="item.istable" style="width: 100%">
          <a-select-option value="false">从表可空</a-select-option>
          <a-select-option value="true">从表不可空</a-select-option>
        </a-select></a-col
      >
      <a-col :span="7">
        <a-input allow-clear v-model="item.msg" placeholder="请输入为空提示" />
      </a-col>
      <!-- 操作按钮 -->
      <a-col :span="3">
        <a-popconfirm
          class="plusBox"
          title="确定删除吗？"
          ok-text="是"
          cancel-text="否"
          @confirm="plusDel(item, index)"
        >
          <a-icon slot="icon" type="delete" />
          <a-icon type="minus" />
        </a-popconfirm>
        <span v-if="index + 1 == nodeList.length" class="plusBox" @click.stop="plusAdd()">
          <a-icon type="plus" />
        </span>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  props: {
    f_nodeList: {
      type: Array,
    },
  },
  data() {
    return {
      nodeList: this.getnodeList() || [],
      selectList: this.getSelectList(this.f_nodeList) || [],
    }
  },
  created() {},
  methods: {
    f_checkTreeNode() {
      let tempNodeList = JSON.parse(JSON.stringify(this.nodeList))
      let check = { status: false, value: tempNodeList }
      if (tempNodeList.length > 0) {
        let i = 0
        for (let v of tempNodeList) {
          if (!v.node) {
            this.$message.warning(`请选择${i + 1}号的校验节点`)
            return check
          }
          if (v.istable == undefined) {
            this.$message.warning(`请输入${i + 1}号的从表是否必填`)
            return check
          }
          v.istable = Boolean(v.istable)
          if (!v.msg) {
            this.$message.warning(`请输入${i + 1}号的为空提示`)
            return check
          }
          i++
        }
      }
      check.status = true
      return check
    },
    getnodeList() {
      let vuexNodeList = this.$store.getters.getOriginalObj('TREECHECK')
      if (vuexNodeList != null) {
        return vuexNodeList.map(v => {
          v.istable = String(v.istable)
          return v
        })
      }
      return []
    },
    getSelectList(f_nodeList) {
      let tempArr = []
      this.recursionTree(f_nodeList, tempArr)
      return tempArr
    },
    recursionTree(treeData, tempArr = []) {
      treeData.map((v) => {
        if (v.sign != undefined) {
          tempArr.push(v)
        }
        // 递归
        if (v.children && v.children.length > 0) {
          this.recursionTree(v.children, tempArr)
        }
      })
    },
    plusAdd() {
      this.nodeList.push({
        node: undefined,
        istable: undefined,
        msg: undefined,
      })
    },
    plusDel(item, index) {
      this.nodeList.splice(index, 1)
    },
  },
}
</script>

<style scoped>
.plusBox {
  margin: 0 10px 0 0;
  cursor: pointer;
  color: #1e90ff;
}

.row_margin {
  margin-bottom: 10px;
}
</style>
